<template>
  <div class="model-page">
    <div class="page-full-askTeacher pBtm">
      <!-- 顶部 -->
      <topHeader  title="问大师" :show-left='isShowLeft'></topHeader>

      <!-- 广告 -->
      <div class="service_wrapper">
        <img src="../../../static/image/askTeacher/banner.png" alt="">
      </div>

      <!-- 大师列表 -->
      <ul class="teacher_wrapper" v-if="fetch_data.master&&fetch_data.master.length">
        <li v-for="(i,idx) in fetch_data.master" :key="'teacher_'+idx" @click="toTeacherDetail(i.id)">
          
          <div class="c_base">
            <div class="_img">
              <img :src="imgUrl(i.thumb_img)" alt="" srcset="">
            </div>
            <div class="_info">
              <p class="name">{{i.name}} <i class="i_sign"></i></p>
              <div class="score">
                <i v-for="(si,sidx) in starClass(i.level,'i_score_on','i_score_half','i_score_gray')" :class="si" :key="'score'+sidx"></i>
                <span>{{i.score}}分</span>
              </div>
              <p class="adept">擅长：{{i.skills}}</p>
            </div>
          </div>

          <p class="c_des">{{i.description}}</p>

          <div class="c_foot">
            <span class="_solve fl">已解答：{{i.answernum}}人</span>
            <span class="_cmt fr">评论：{{i.pl_num}}人</span>
          </div>

        </li>
      </ul>

      <!-- 选择咨询项目 -->
      <section class="consult_pro_wrapper">
        <header class="title">
          <h3><i></i><span>选择咨询项目</span><i></i></h3>
          <p>不知选哪位老师？选择项目，智能匹配</p>
        </header>
        <nav class="nav_list">
          <span 
            v-for="(i,idx) in fetch_data.question_type" :key="'nav_'+idx"
            :class="{'active':curNavIdx==idx}"
            @click="tabNav(idx)"
            >{{i.type_name}}
          </span>
        </nav>
        <div class="btn mBtn_hole" @click="toTeacherDetail1(curTypeId)">立即匹配</div>
      </section>

    </div>
  </div>
</template>

<script>
import topHeader from '@/components/topHeader'
import tool from '@/assets/js/tool.js';
export default {
  components:{
    topHeader,
  },
  data() {
    return {
      isPbtm:true,//控制是否有padding-bottom
      isShowLeft:false,
      curNavIdx:-1,/*默认咨询第一项的索引*/
      curTypeId:'',/*默认咨询第一项的类型id*/
      fetch_data:{},
      middPage: '',
    };
  },
  created() {
    this.$store.commit('changePageLoading',true);
    this.isMiddlePage();
    this.fetch_page();
  },
  // 如果路由进入前，是从 teacherDetail页面返回来的，那么就设置当前缓存
  // beforeRouteEnter(to, from, next) {
  //   if(from.path == '/teacherDetail'){
  //     to.meta.keepAlive = true ;
  //   }else{
  //     to.meta.keepAlive = false ;
  //   }
  //   next();
  // },
  methods: {
    isMiddlePage(){
      this.middPage = this.$route.query.isMiddlePage;
      if(this.middPage){
        this.isShowLeft = true;
        this.isPbtm = false;
      }else{
        this.isShowLeft = false;
      }
    },
    imgUrl(url){
      return 'https://ykdstatic.dd668.cn/'+url;
    },
    starClass(level,on,half,gray){
      return tool.starClass(level,on,half,gray);
    },
    /**
      @func
      @desc:咨询项目切换
      @param: idx - 索引  
    */
    tabNav(idx){
      if(idx!=this.curNavIdx){
        this.curNavIdx = idx;
        // 字段id表示类型id
        this.curTypeId = this.fetch_data.question_type[idx].id;
      }else{
        this.curNavIdx = -1;
        this.curTypeId = '';
      }
      
      // console.log('store',this.$store);
      // this.$store.commit({
      //   type:'saveCurTypeId',
      //   val:this.curTypeId,
      // });

    },

    /**
      @func
      @desc:咨询项目切换
      @param: 表示获取某大师详情 ------mid 必填 type_id 不用填
              注：mid - 大师id 
                       
    */ 
    toTeacherDetail(mid){
      this.$router.push({
        path:'/teacherDetail',
        query:{
          'mid':mid
        }
      })
    },
     /**
      @func
      @desc:咨询项目切换
      @param: 表示自动匹配 -----type_id必填 mid不用填
              注：type_id - 类型id 
                       
    */ 
    toTeacherDetail1(type_id){
      if(this.curNavIdx==-1){
        // console.log('type_id',type_id)
        this.$vux.toast.text('请选择咨询项目!', 'middle')
        return;
      }
      this.$router.push({
        path:'/teacherDetail',
        query:{
          'type_id':type_id
        }
      })
    },
    fetch_page(){
      this.$fetch.post('/app/Jmyc/master_list',{}).then((res)=>{
        if(res.code==200){
          this.fetch_data = res.data;
          this.fetch_data.question_type[0].cid;/*默认咨询第一项的类型id*/
          this.$store.commit('changePageLoading',false);
        }
      });
    },


  }
};
</script>

<style lang="less" scoped>
@import "../../assets/css/public.less";
@import "../../assets/css/tml_base.less";
@import "./index.less";
</style>